<!doctype html>
<html>
   <head>
      <title>humane.js</title>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta charset='utf-8'>
      <link href='http://fonts.googleapis.com/css?family=Ubuntu&v2' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:700&v2' rel='stylesheet' type='text/css'>
      <style>
         body {
            font-family: Ubuntu, sans-serif;
            padding: 80px;
            background-color: #60D6A7;
         }
         h1,h3 {
            font-family: 'Cabin Sketch', serif;
            text-shadow: -1px 0px 1px #aaa;
         }
         h1 {
            font-size: 4em;
            margin: 0
         }
         h3 {
            font-size: 2em;
            margin: 0
         }
         select {
            font-size: 0.8em;
         }
         a {
            text-decoration: none;
            color: #a13;
            font-weight: bold;
         }
         a:hover {
            text-decoration: underline;
         }
         pre {
            font-family: "Ubuntu Mono";
            font-size: 0.9em;
            width: 75%;
            background-color: #007143;
            border-radius: 6px;
            padding: 5px 10px;
            color: #fff;
            cursor: pointer;
            text-shadow: -1px 1px 1px #333;
            box-shadow: 0px 8px 8px -8px #333;
            -moz-transition: all 0.3s ease-out;
            -webkit-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
         }
         pre:hover {
            background-color: #00ae68;
         }
         blockquote {
            font-size: 0.8em
         }
      </style>
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <link rel='stylesheet' href='themes/bigbox.css'/>
      <link rel='stylesheet' href='themes/boldlight.css'/>
      <link rel='stylesheet' href='themes/jackedup.css'/>
      <link rel='stylesheet' href='themes/libnotify.css'/>
      <link rel='stylesheet' href='themes/original.css'/>
      <link rel='stylesheet' href='themes/flatty.css'/>

      <script src='humane.js'></script>
   </head>
   <body>
     
      <h1>humane.js</h1>
      <p>
         <strong>A simple, modern, framework-independent, well-tested, unobtrusive, notification system.</strong>
         <br/>Utilizes CSS transitions when available, falls back to JS animation when not.  Includes mobile support.
      </p>
      <h3>Select a theme:
         <select onchange='humane.baseCls="humane-"+this.options[this.selectedIndex].value'>
            <option selected>libnotify</option>
            <option>bigbox</option>
            <option>boldlight</option>
            <option>jackedup</option>
            <option>original</option>
            <option>flatty</option>
         </select>
      </h3>
      <p>Click a code sample below to see it in action:</p>

      <pre>humane.log("Welcome Back")</pre>
      <pre>humane.log("Record <b>392</b> has been updated")</pre>
      <pre>humane.log(["List","of","Items"])</pre>
      <pre>humane.log("Callback when finished", function(){ document.body.style.backgroundColor="#a66000" })</pre>
      <pre>humane.log("Options can be passed", { timeout: 4000, clickToClose: true, addnCls: 'humane-error' })</pre>

      <h3>Options</h3>
      <p>Options can be specified in a variety of ways.  Either by the entire instance as shown below, or per notification, as shown above:</p>
      <pre>humane.timeout = 5000 // default: 2500</pre>
      <blockquote>
         <p>Sets the delay before a message fades out (set to <b>0</b> for no timeout).</p>
      </blockquote>
      <pre>humane.waitForMove = true // default: false</pre>
      <blockquote>
         <p>Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)</p>
      </blockquote>
      <pre>humane.clickToClose = true // default: false</pre>
      <blockquote>
         <p>Click or touch the notification to close</p>
      </blockquote>
      <pre>humane.timeoutAfterMove = 2000 // default: 0</pre>
      <blockquote>
         <p>Delay before notification disappears (useful in conjunction with waitForMove)</p>
      </blockquote>
      <pre>humane.addnCls = 'humane-info' // default: ''</pre>
      <blockquote>
         <p>Specify an additional class to apply when notifying (nice when you only want to change just a little bit of the style)</p>
      </blockquote>
      <h3>Create instances with humane.create</h3>
      <p>Create a completely new instance of humane using <b>humane.create()</b>.</p>
      <pre>
var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })
notify.log('Custom Notifier')</pre>

      <p>There are a options that can also be applied when creating an instance:</p>
      <pre>humane.baseCls = 'humane' // default: 'humane'</pre>
      <blockquote>
         <p>Specify an base class</p>
      </blockquote>

      <h3>Spawn notifiers with humane.spawn</h3>
      <p>Create a custom notifier using <b>humane.spawn()</b>.</p>
      <pre>
humane.info = humane.spawn({ addnCls: 'humane-libnotify-info', timeout: 1000 })
humane.info('Info Themed Notifier')</pre>
      <pre>
humane.error = humane.spawn({ addnCls: 'humane-libnotify-error', timeout: 1000 })
humane.error('Error Themed Notifier')</pre>

      <h3>Force remove current notification</h3>
      <pre>humane.remove(function(){ alert('removed') })</pre>
      <blockquote>
         <p>Force remove current notification, takes an optional callback fired when finished (note each instance has its own remove)</p>
      </blockquote>

      <h3>Go crazy</h3>
      <p>With all this power, you are bound to go CRAZY!  Click the sample below to go crazy:</p>
      <pre>
var bigbox = humane.create({baseCls: 'humane-bigbox', timeout: 1000})
bigbox.error = bigbox.spawn({addnCls: 'humane-bigbox-error'})
bigbox.log('Oh!').error('No!')

var libnotify = humane.create({baseCls: 'humane-libnotify', addnCls: 'humane-libnotify-info'})
libnotify.log('Notified')

var jacked = humane.create({baseCls: 'humane-jackedup', addnCls: 'humane-jackedup-success'})
jacked.log("What's up here!")</pre>

      <h3>Browser Support</h3>
      <p>Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.</p>
      <ul>
         <li>Internet Explorer 7+</li>
         <li>Firefox 3+</li>
         <li>Chrome 9+</li>
         <li>Safari 3+</li>
         <li>Opera 10+</li>
         <li>iOS 4+</li>
         <li>Android 2+</li>
      </ul>

      

      <script>
         humane.baseCls = 'humane-libnotify'
         var pretags = document.getElementsByTagName('pre')
         for (var i = 0; i < pretags.length; i++) { (function(el){
            el.onclick = function () {
               eval(el.innerHTML)
            }
         }(pretags[i])) }
      </script>
   </body>
</html>
